/* version: 1.5.0; */ $(function() { /* Navigation Processing ------------------------------------------------------- */ // Effect for dropdown menus with Superfish plugin if($().superfish) { $("#main-nav > ul").superfish({ autoArrows: false }); } // Switch to modible-friendly menu on small screens with MobileMenu plugin if($().mobileMenu) { $("#main-nav > ul").mobileMenu({ subMenuDash: '—' }); } // Add subtitle text to the first level menu items from the "data-subtitle" attribute in link $("#main-nav > ul > li > a").each(function(){ if( $(this).attr("data-subtitle") ) { subtitle = '' + $(this).attr("data-subtitle") + ''; $(this).append(subtitle); } }); /* On/Off Content ------------------------------------------------------- */ $("#gallery-control .toggle-content").toggleClass("unvisible"); $("#gallery-control .toggle-bn").toggleClass("unvisible"); /*$("#logo a").click(function(event){ event.preventDefault(); if( $("#sidebar").hasClass("show") ) { toggleMenu(0); } else { toggleMenu(1); } }); */ $(".toggle-content").click(function(){ if( $("#gallery-control .toggle-content").hasClass("unvisible") ) { show_details(1); } else { show_details(0); } }); $(".toggle-bn").click(function(){ if( $("#gallery-control .toggle-bn").hasClass("unvisible") ) { show_bn(1); } else { show_bn(0); } }); /* Content Elements ------------------------------------------------------- */ // Accordion $('.accordion-title').click(function() { $('.accordion-title').removeClass('a-open'); $('.accordion-content').slideUp(200); if($(this).next().is(':hidden') == true) { $(this).addClass('a-open'); $(this).next().slideDown(200); } }); $('.accordion-content').hide(); // Tabs $('.panes div').hide(); $(".headings a:first").addClass("selected"); $(".tabs").each(function(){ $(this).find('.panes div:first').show(); $(this).find('a:first').addClass("selected"); }); $('.headings a').click(function(){ var which = $(this).attr("rel"); $(this).parents(".tabs").find(".selected").removeClass("selected"); $(this).addClass("selected"); $(this).parents(".tabs").find(".panes").find("div").hide(); $(this).parents(".tabs").find(".panes").find("#"+which).fadeIn(800); }); $("[rel=tooltip]").tooltip(); /* Supersized slideshow ------------------------------------------------------- */ if( $().supersized ) { $.supersized({ // Functionality slideshow : 1, // Slideshow on/off autoplay : 0, // Slideshow starts playing automatically start_slide : 1, // Start slide (0 is random) stop_loop : 0, // Pauses slideshow on last slide random : 0, // Randomize slide order (Ignores start slide) slide_interval : 6000, // Length between transitions transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 1000, // Speed of transition new_window : 1, // Image links open in new window/tab pause_hover : 0, // Pause slideshow on hover keyboard_nav : 1, // Keyboard navigation on/off performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) image_protect : 1, // Disables image dragging and right click with Javascript // Size & Position min_width : 0, // Min width allowed (in pixels) min_height : 0, // Min height allowed (in pixels) vertical_center : 1, // Vertically center background horizontal_center : 1, // Horizontally center background fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions) fit_portrait : 0, // Portrait images will not exceed browser height fit_landscape : 0, // Landscape images will not exceed browser width // Components slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') thumb_links : 0, // Individual thumb links for each slide thumbnail_navigation : 1, // Thumbnail navigation slides : [ // Slideshow Images ], // Theme Options progress_bar : 1, // Timer for each slide mouse_scrub : 0 }); } /* Lightbox (Colorbox plugin) ------------------------------------------------------- */ if($().colorbox) { /* catch carousel and gallery images for ColorBox */ $("#content ul, #wall-gallery ul").each(function(){ gallery_id = Math.floor(Math.random()*1001); $("a[href$='.jpg'], a[href$='.png'], a[href$='.gif']", this).attr("data-gallery", 1).colorbox({ rel: gallery_id, transition: "elastic" }); }); /* catch alone images for ColorBox */ $("a[href$='.jpg'], a[href$='.png'], a[href$='.gif']").each(function(){ if(!$(this).attr("data-gallery")){ $(this).colorbox({ transition: "elastic" }); } }); /* catch video for ColorBox */ $("a[href*='youtube.com'], a[href*='vimeo.com']").not("#social-profiles a").each(function(){ if(!$(this).attr("data-gallery")){ $(this).colorbox({ iframe:true, innerWidth:425, innerHeight:344, transition: "elastic" }); } }); } /* Footer ------------------------------------------------------- */ footer_state = "close"; $("#footer-switcher").one("click", function() { footer_height = $("#footer > .inner").outerHeight(); $("#footer").css({ "top": -footer_height, "height": "auto" }); }); $("#footer-switcher").click(function() { if(footer_state == "close") { $("#footer").show().animate({ top : 0 }, 400, "easeOutQuad"); $(this).addClass("open"); footer_state = "open"; } else if(footer_state == "open") { $("#footer").show().animate({ top : -footer_height }, 400, "easeOutQuad"); $(this).removeClass("open"); footer_state = "close"; } return false; }); $("#footer").fadeIn("fast"); $(window).resize(function() { footer_height = $("#footer").outerHeight(); $("#footer").css({ "top" : -footer_height }).show(); $("#footer-switcher").removeClass("open"); footer_state = "close"; return false; }); /* Flexslider ------------------------------------------------------- */ if($().flexslider) { $('.flexslider').not(".gallery-thumbnail .flexslider").flexslider({ namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril animation: "slide", //String: Select your animation type, "fade" or "slide" easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported! direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" reverse: false, //{NEW} Boolean: Reverse the animation direction animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide) slideshow: true, //Boolean: Animate slider automatically slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds randomize: false, //Boolean: Randomize slide order // Usability features pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended. pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches // Primary Controls controlNav: false, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false) prevText: "Previous", //String: Set the text for the "previous" directionNav item nextText: "Next", //String: Set the text for the "next" directionNav item // Secondary Navigation keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present. mousewheel: true, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel pausePlay: false, //Boolean: Create pause/play dynamic element pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item playText: 'Play', //String: Set the text for the "play" pausePlay item // Special properties controlsContainer: "", //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found. manualControls: "", //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs. sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care. asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider // Carousel Options itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding. itemMargin: 0, //{NEW} Integer: Margin between carousel items. minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this. maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit. move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items. // Callback API start: function(){ $("#content > .inner").mCustomScrollbar("update"); }, //Callback: function(slider) - Fires when the slider loads the first slide before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation after: function(){}, //Callback: function(slider) - Fires after each slider animation completes end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous) added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added removed: function(){} //{NEW} Callback: function(slider) - Fires after a slide is removed }); $(".gallery-thumbnail .thumb-carousel").flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, itemWidth: 174, itemMargin: 5, asNavFor: '.full-slides', start: function(){ $("#content > .inner").mCustomScrollbar("update"); } }); $(".gallery-thumbnail .full-slides").flexslider({ animation: "slide", controlNav: false, directionNav: false, animationLoop: false, slideshow: false, sync: ".thumb-carousel", start: function(){ $("#content > .inner").mCustomScrollbar("update"); } }); } /* Twitter Widget ------------------------------------------------------- */ if($().jTweetsAnywhere) { $('.widget_twitter .tweets').jTweetsAnywhere({ username: 'envato', count: 2, showTweetFeed: { showProfileImages: false, showUserScreenNames: true, showUserFullNames: false, showActionReply: false, showActionRetweet: false, showActionFavorite: false } }); } /* Go Fullscreen ------------------------------------------------------- */ if( $().fullScreen ) { $("#c-fullscreen").click(function(){ $("#supersized, #fullscreen-video").fullScreen(true); }); } /* jCarousels ------------------------------------------------------- */ if( $().jcarousel ) { fix_carousel_height(); $(window).resize(function(){ fix_carousel_height(); }); $(".carousel").each(function(){ var self = $(this); $(this).imagesLoaded(function(){ $(this).jcarousel({ "list": "ul" }); }); $(".prev").click(function() { $(this).parent(".carousel-control").next(".carousel").jcarousel("scroll", "-=1"); }); $(".next", $(self).prev(".carousel-control")).click(function() { $(this).parent(".carousel-control").next(".carousel").jcarousel("scroll", "+=1"); }); }); } /* Build Page & Scrollbars ------------------------------------------------------- */ buildPage(); toggleMenu(1); $(window).resize(function(){ buildPage(); }); /* Custom Scroll Bar ------------------------------------------------------- */ if($().imagesLoaded) { // Wall Default $("#wall-gallery").imagesLoaded(function (){ $(this).parent('#srcoll-touch').addClass("no-load").mCustomScrollbar({ scrollButtons: { enable: false }, contentTouchScroll: true }); delay = 0; $("img", this).each(function(){ delay = delay + 80; $(this).delay(delay).animate({ opacity: 1 }, 1000); }) }); // Wall Masonry $("#wall-gallery-masonry").imagesLoaded(function (){ if($().masonry) { $('#masonry').masonry({ itemSelector: '.m-item', isResizable: true, columnWidth: function( containerWidth ) { return containerWidth / 5; } }); $(window).resize(function(){ $('#masonry').masonry( 'reloadItems' ); }); } $(this).parent('#srcoll-touch').addClass("no-load").mCustomScrollbar({ scrollButtons: { enable: false }, advanced:{ updateOnBrowserResize: true, autoExpandHorizontalScroll: true, updateOnContentResize: true }, contentTouchScroll: true }); delay = 0; $("img", this).each(function(){ delay = delay + 80; $(this).delay(delay).animate({ opacity: 1 }, 1000); }) }); // Wall Horizontal $("#wall-gallery-horizontal").imagesLoaded(function (){ $(this).parent('#srcoll-touch').addClass("no-load").mCustomScrollbar({ scrollButtons: { enable: false, }, horizontalScroll: true, contentTouchScroll: true, set_height: "100%", advanced:{ updateOnBrowserResize: true, autoExpandHorizontalScroll: true, updateOnContentResize: true } }); delay = 0; $("img", this).each(function(){ delay = delay + 80; $(this).delay(delay).animate({ opacity: 1 }, 1000); }) }); $("#content > .inner").imagesLoaded(function(){ $("#content > .inner").mCustomScrollbar({ scrollButtons: { enable: false } }); }); function fixHorizontalWall() { $("#wall-gallery-horizontal").imagesLoaded(function(){ $("#wall-gallery-horizontal img") .each(function(){ container_width = $(this).width(); $(this).parent("li").width( container_width ); }); }); } fixHorizontalWall(); $(window).resize(function(){ fixHorizontalWall(); }); } /* Portfolio Filter ------------------------------------------------------- */ $("#filter > div").click(function(event){ event.stopPropagation(); $(this).next().slideToggle(300); }); $("body, #filter li").click(function(){ $("#filter > ul").slideUp(300); }); if( $().isotope ) { var $container = $('#filterable-portfolio'); $container.imagesLoaded(function () { $container.isotope({ itemSelector: '.grid-item', layoutMode: 'fitRows' }); }); $('#filter li').click(function () { $('#filter li').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); $(window).resize(); }); $(window).resize(function() { $container.isotope('reLayout'); }); } /* Video & Audio (code from http://webtonio.com/40/) ------------------------------------------------------- */ if($().mediaelementplayer) { var $videoWrap = $("#fullscreen-video"), // caching object default_ht = $videoWrap.height(), // get current height default_wt = $videoWrap.width(), // get current width $me = $("#fullscreen-video > video").mediaelementplayer({ videoHeight : default_ht, //set default height videoWidth : default_wt, //set default width defaultVideoWidth : default_wt, //another option for default width defaultVideoHeight : default_ht, //another option for default height success : function(me,domObj) { //phew we are ready to go var player = me.player || domObj.player, //me does not always have the player, strange. //Okay, so if we have an $MediaElement object, we use it! //Otherwise default to the mediaElement object passed into the function. meElem = ($me) ? $me[0] : me, //sometimes $me is undefined, strange. isNative = (player.media.pluginType == "native"); //Key to resizing plugin (flash or silverlight) var $html = $("html"), //Grab the html object and cache it width, height, prevWidth, prevHeight, //used to determine if the size has actually changed rTimer; //We will be using this during the window.resize handler function resize_video() { width = $videoWrap.width(); height = $videoWrap.height(); if( prevWidth != width || prevHeight != height ) { //has the width changed from the previous width? meElem.player.setPlayerSize(width,height); //call mejs.player.setPlayerSize to reset video width and height meElem.player.setControlsSize(); // now let's reset the controls appropriate to the new width and height if(!isNative){ // If this is a plugin (flash or silverlight) we have to do some more work meElem.player.options.videoWidth = width; //I did this for safety measure, not sure if it's necessary meElem.player.options.videoHeight = height; //I did this for safety measure, not sure it's necessary me.setVideoSize(width,height); //this function is always returned with the me object bassed by the success handler. } // end if not:isNative } //end width check prevWidth = width; prevHeight = height;//used to detect whether or not we need to resize video } //end function resize_video //Now we add the window.resize handler $(window).resize(function() { clearTimeout(rTimer); //for some resize is executed twice, so we use this "hack" to avoid that. rTimer = setTimeout(resize_video,500); //keeps the event from being called twice }); me.play(); } //end of success property }); //end mediaelmentplayer $("audio#bg-sound").mediaelementplayer({ success: function(me) { if( !$("audio#bg-sound").attr("autoplay") ) $(".s-sound").fadeTo(0, 0.4); $(".s-sound").click(function(){ if (me.paused) { $(".s-sound").fadeTo("slow", 1); me.play(); } else { $(".s-sound").fadeTo("slow", 0.4); me.pause(); } }); } }); } }); function buildPage() { // remove prevously set height $("#sidebar > .inner").height("auto"); // get top and bottom padding on the page space_top = parseInt( $("#page").css("padding-top") ); space_bottom = parseInt( $("#page").css("padding-bottom") ); space_whole = space_top + space_bottom; // get available window height and set for the #page element window_height_available = $(window).height() - space_whole; $("#page").height( window_height_available - 60); // set the height for content area content_top = parseInt( $("#page-body > #content > .inner").css("margin-top") ); content_bottom = parseInt( $("#page-body > #content > .inner").css("margin-bottom") ); control_panel = 0; if( $("#gallery-control").size() ) { control_panel = 59; } $("#page-body > #content > .inner").height( window_height_available - content_top - content_bottom - control_panel - 60); // set the seight of sidebar if enough sidebar_natural_height = $("#sidebar > .inner").height(); logo_natural_height = $("#logo").outerHeight() + 4; left_space_for_sidebar = window_height_available - logo_natural_height; if( sidebar_natural_height <= left_space_for_sidebar ) { $("body").removeClass("scroll-off"); //$("#sidebar > .inner").height( left_space_for_sidebar ); } else { $("body").addClass("scroll-off"); } $("#content > .inner").mCustomScrollbar("update"); $("#gallery-control").show(); } $("#page-body, #gallery-overlay").hide(); function toggleMenu(show_or_hide) { //$("#gallery-control .toggle-content").toggleClass("unvisible"); if(show_or_hide) { $("#click-here").fadeOut(150, function(){ $("body").removeClass("content-off"); $("#sidebar").fadeIn(500); $("#sidebar").addClass("show").removeClass("hide"); //$("#page-body, #gallery-overlay").hide(); fix_carousel_height(); buildPage(); $("#content > .inner").mCustomScrollbar("update"); }); } else { $("#sidebar").fadeOut(500, function(){ //$("body").addClass("content-off").removeClass("scroll-off"); $("#sidebar").addClass("hide").removeClass("show"); $("#click-here").fadeIn(500); }); } } function toggleContent(show_or_hide) { //$("#gallery-control .toggle-content").toggleClass("unvisible"); if(show_or_hide) { $("#click-here").fadeOut(150, function(){ $("body").removeClass("content-off"); $("#sidebar,#page-body, #gallery-overlay").fadeIn(500); fix_carousel_height(); buildPage(); $("#content > .inner").mCustomScrollbar("update"); }); } else { $("#sidebar").fadeOut(500, function(){ $("body").addClass("content-off").removeClass("scroll-off"); $("#click-here").fadeIn(500); }); } } function show_details(show_or_hide) { $("#gallery-control .toggle-content").toggleClass("unvisible"); if(show_or_hide) { $("body").removeClass("content-off"); $("#page-body, #gallery-overlay").fadeIn(500); fix_carousel_height(); buildPage(); $("#content > .inner").mCustomScrollbar("update"); } else { $("#page-body, #gallery-overlay").fadeOut(500, function(){ //$("body").addClass("content-off").removeClass("scroll-off"); }); } } function show_bn(show_or_hide) { $("#gallery-control .toggle-bn").toggleClass("unvisible"); if(show_or_hide) { $("body").removeClass("content-off"); $("#page-body, #gallery-overlay").fadeIn(500); fix_carousel_height(); buildPage(); $("#content > .inner").mCustomScrollbar("update"); } else { $("#page-body, #gallery-overlay").fadeOut(500, function(){ $("body").addClass("content-off").removeClass("scroll-off"); }); } } function fix_carousel_height() { $(".carousel").each(function(){ var self = this; max_height = 0; $("li", this).each(function(){ current_height = $(this).height(); if( current_height > max_height ) { max_height = current_height; } }); $(self).height(max_height); }); }